<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘宝网 - 淘！我喜欢</title>
	<link rel="stylesheet" href="./font/iconfont.css"> 
	<link rel="stylesheet" href="./css/index.css">
	<link rel="stylesheet" href="./css/nav.css">
	<link rel="stylesheet" type="text/css" href="./css/search.css">
	<link rel="stylesheet" type="text/css" href="./css/content-top.css">
	<link rel="stylesheet" type="text/css" href="./css/content-left.css">
	<link rel="stylesheet" type="text/css" href="./css/content-right.css">
	<link rel="stylesheet" type="text/css" href="./css/wangwang.css">
	
</head>
<body>

	<!-- 顶部导航栏 -->
		<div class="nav-top">
			<div class="nav-content">
	
				<!-- 导航栏左部 -->
					<ul class="nav-left">
						<li class="li-white">
							<span class="li-span">地区</span>
							<span class="iconfont">&#xe62f;</span>
	
							<!-- 下拉列表 -->
							<ul class="nav-sub1">
		<li class="sub1-li"><a href="">全球</a></li>
		<li class="sub1-li"><a href="">国家1</a></li>
		<li class="sub1-li"><a href="">国家2</a></li>
		<li class="sub1-li"><a href="">国家3</a></li>
		<li class="sub1-li"><a href="">国家4</a></li>
		<li class="sub1-li"><a href="">国家5</a></li>
		<li class="sub1-li"><a href="">国家6</a></li>
		<li class="sub1-li"><a href="">国家7</a></li>
		<li class="sub1-li"><a href="">国家8</a></li>
		<li class="sub1-li"><a href="">国家9</a></li>
		<li class="sub1-li"><a href="">国家10</a></li>
		<li class="sub1-li"><a href="">国家11</a></li>
		<li class="sub1-li"><a href="">国家12</a></li>
		<li class="sub1-li"><a href="">国家13</a></li>
		<li class="sub1-li"><a href="">国家14</a></li>
							</ul>国家
						</li>
						<li>
							<a href="" id="login-in">亲，请登录</a>
						</li>
						<li class="li-red">
							<a href="">免费注册</a>
						</li>
						<li class="li-red">
							<a href="">手机逛淘宝</a>
						</li>
						<li class="li-red">
							<a href="">网页无障碍</a>
						</li>
					</ul>
	
				<!-- 导航栏右部	 -->
					<ul class="nav-right">
						<li class="li-white">
							<div class="ired">
								<a href="">我的淘宝</a>
							<span class="iconfont">&#xe62f;</span>
							</div>
	
							<!-- 下拉列表 -->
							<ul class="nav-sub2">
		<li class="sub2-li"><a href="">已买到的宝贝</a></li>
		<li class="sub2-li"><a href="">我的足迹</a></li>
							</ul>
						</li>
						<li class="li-red">
							<span class="iconfont" 
								style="color:#f22e00;font-size: 14px;   margin:0">
								&#xe73d;</span>
							<a href="">购物车</a>
						</li>
						<li class="li-white">
							<div class="ired">
							<span class="iconfont" style="margin: 0;font-size:14px" id="col">&#xe732;</span>
							<a href="">收藏夹</a>
							<span class="iconfont">&#xe62f;</span>
							</div>
							<ul class="nav-sub3">
		<li class="sub3-li"><a href="">收藏的宝贝</a></li>
		<li class="sub3-li"><a href="">收藏的店铺</a></li>
							</ul>
						</li>
						<li class="li-red">
							<a href="">商品分类</a>
						</li>
						<li class="li-red">
							<a href="">免费开店</a>
						</li>
						<li>|</li>
						<li class="li-white">
							<div class="ired">
							<a href="">千牛卖家中心</a>
							<span class="iconfont">&#xe62f;</span>	</div>
							<ul class="nav-sub4">
		<li class="sub4-li"><a href="">免费开店</a></li>		    	<li class="sub4-li"><a href="">已卖出的宝贝</a></li>
		<li class="sub4-li"><a href="">出售中的宝贝</a></li>
		<li class="sub4-li"><a href="">卖家服务市场</a></li>
		<li class="sub4-li"><a href="">卖家培训中心</a></li>
		<li class="sub4-li"><a href="">体检中心</a></li>
		<li class="sub4-li"><a href="">问商友</a></li>		
							</ul>
						</li>
						<li class="li-white">
							<div class="ired">
							<a href="">联系客服</a>
							<span class="iconfont">&#xe62f;</span>	
							</div>
							<ul class="nav-sub5">
		<li class="sub5-li"><a href="">消费者客服</a></li>		    <li class="sub5-li"><a href="">卖家客服</a></li>			
							</ul>
						</li>
					</ul>
			</div>
		</div>
	
		<!-- 顶部搜索栏 -->
		<div class="search-wrapper">
			<div class="search-content">
				<!-- 左边logo -->
				<div class="search-logo-wrapper">
					<a href="" class="search-logo"></a>
				</div>
				<!-- 中间搜索栏 -->
				<div class="form-wrapper">
					<div class="form-body">
						<form>
							<!-- 左边下拉部分 -->
							<div class="form-list">
								<span class="iconfont">&#xe62f;</span>
								<span>宝贝</span>
								<!-- 下拉列表 -->
								<div class="form-list-sub">
									<ul>
										<li><a href="">天猫</a></li>
										<li><a href="">店铺</a></li>
									</ul>
								</div>
							</div>
							<!-- 中间用户搜索部分 -->
							<input class="search-box iconfont" type="text"
							placeholder="&#xe693;早柚">
							</input>
							<button>搜索</button>	
						</form>
					</div>
					<!-- 下面小字部分 -->
					<ul>
			<li class="form-text"><a href="">新款连衣裙</a></li>
			<li class="form-text"><a href="">四件套</a></li>
			<li class="form-text">
				<a href="" id="special">潮流T恤</a>
			</li>
			<li class="form-text"><a href="">时尚女鞋</a></li>
			<li class="form-text"><a href="">短裤</a></li>
			<li class="form-text"><a href="">半身裙</a></li>
			<li class="form-text"><a href="">男士外套</a></li>
			<li class="form-text"><a href="">墙纸</a></li>
			<li class="form-text"><a href="">行车记录仪</a></li>
			<li class="form-text"><a href="">新款男鞋</a></li>
			<li class="form-text"><a href="">耳机</a></li>
			<li class="form-text"><a href="">时尚女包</a></li>
			<li class="form-text"><a href="">沙发</a></li>
					</ul>
				</div>
				<!-- 右边二维码 -->
				<a href="" id="qrcode">
					<span>下载淘宝</span>
					<img class="img-qrcode" 
					src="./img/11.png"></img>
				</a>
			</div>
		</div>
		
		<!-- 主内容上端导航栏 -->
		<div class="content-top">
			<div class="content-top-text">
				<h2>主题市场</h2>
				<ul class="content-top-text1">
					<li><a href="" id="color1">天猫</a></li>
					<li><a href="" id="color2">聚划算</a></li>
					<li><a href="" id="color3">天猫超市</a></li>
				</ul>
				<ul class="content-top-text2">
					<li class="vertical">|</li>
					<li><a href="">司法拍卖</a></li>
					<li><a href="">飞猪旅行</a></li>
					<li><a href="">天天特卖</a></li>
				</ul>
				<ul class="content-top-text3">
					<li class="vertical">|</li>
					<li><a href="">造点新货</a></li>
					<li><a href="">苏宁易购</a></li>
					<li><a href="">淘宝心选</a></li>
					<li><a href="">智能生活</a></li>
					<li><a href="">淘宝直播</a></li>
				</ul>
			</div>
		</div>
	
		<!-- 主内容区 -->
		<div class="content">
			
			<!-- 主内容左侧区域 -->
			<div class="content-left">
				<!-- 左侧区域导航栏 -->
				<ul class="content-left-nav">
					<li>
						<span class="iconfont">&#xe611;</span>
						<a href="">女装</a>
						<span>/</span>
						<a href="">内衣</a>
						<span>/</span>
						<a href="">家居</a>
					</li>
					<li>
						<span class="iconfont">&#xe60f;</span>
						<a href="">女鞋</a>
						<span>/</span>
						<a href="">男鞋</a>
						<span>/</span>
						<a href="">箱包</a>
					</li>
					<li>
						<span class="iconfont">&#xe606;</span>
						<a href="">母婴</a>
						<span>/</span>
						<a href="">童装</a>
						<span>/</span>
						<a href="">玩具</a>
					</li>
					<li>
						<span class="iconfont">&#xe60d;</span>
						<a href="">男装</a>
						<span>/</span>
						<a href="">运动</a>
						<span>/</span>
						<a href="">百货</a>
					</li>
					<li>
						<span class="iconfont">&#xe609;</span>
						<a href="">美妆</a>
						<span>/</span>
						<a href="">饰品</a>
						<span>/</span>
						<a href="">洗护</a>
					</li>
					<li>
						<span class="iconfont">&#xe60a;</span>
						<a href="">手机</a>
						<span>/</span>
						<a href="">数码</a>
						<span>/</span>
						<a href="">企业礼品</a>
					</li>
					<li>
						<span class="iconfont">&#xec78;</span>
						<a href="">家装</a>
						<span>/</span>
						<a href="">电器</a>
						<span>/</span>
						<a href="">生活用品</a>
					</li>
					<li>
						<span class="iconfont">&#xe62c;</span>
						<a href="">零食</a>
						<span>/</span>
						<a href="">生鲜</a>
						<span>/</span>
						<a href="">饮料</a>
					</li>
					<li>
						<span class="iconfont">&#xe62e;</span>
						<a href="">厨具</a>
						<span>/</span>
						<a href="">收纳</a>
						<span>/</span>
						<a href="">清洁</a>
					</li>
					<li>
						<span class="iconfont">&#xe615;</span>
						<a href="">家纺</a>
						<span>/</span>
						<a href="">家饰</a>
						<span>/</span>
						<a href="">鲜花</a>
					</li>
					<li>
						<span class="iconfont">&#xe62a;</span>
						<a href="">图书</a>
						<span>/</span>
						<a href="">文具</a>
						<span>/</span>
						<a href="">影像</a>
					</li>
					<li>
						<span class="iconfont">&#xe628;</span>
						<a href="">医药</a>
						<span>/</span>
						<a href="">保健</a>
						<span>/</span>
						<a href="">进口</a>
					</li>
					<li>
						<span class="iconfont">&#xec6d;</span>
						<a href="">汽车</a>
						<span>/</span>
						<a href="">二手车</a>
						<span>/</span>
						<a href="">用品</a>
					</li>
					<li>
						<span class="iconfont">&#xe689;</span>
						<a href="">房产</a>
						<span>/</span>
						<a href="">装修家具</a>
						<span>/</span>
						<a href="">建材</a>
					</li>
					<li>
						<span class="iconfont">&#xe629;</span>
						<a href="">手表</a>
						<span>/</span>
						<a href="">眼镜</a>
						<span>/</span>
						<a href="">珠宝饰品</a>
					</li>
				</ul>
				<a href="" id="img1-a">
					<img src="https://img.alicdn.com/imgextra/i4/6000000004047/O1CN01Y8A3Cu1flZaFyZZft_!!6000000004047-0-alimamazszw.jpg" 
					id="img1">
				</a>
				<div class="img-center">
					<span></span>
					<div class="img-center-right">
						理想生活上天猫
					</div>
				</div>
				<div class="img-bottom">
					<a href=""><img src="https://gw.alicdn.com/imgextra/i1/6000000001050/O1CN01H1ZuTw1JcwdhoDH8c_!!6000000001050-0-octopus.jpg_290x10000Q75.jpg_.webp" style="margin-right: 10px;"></a>
					<a href=""><img src="https://gw.alicdn.com/tfs/TB1Cq1HekvoK1RjSZPfXXXPKFXa-502-380.jpg_290x10000Q75.jpg_.webp"></a>
				</div>
			</div>
	
			<!-- 主内容右侧区域 -->
			<div class="content-right">
				<div class="user-body">
					<img src="https://wwc.alicdn.com/avatar/getAvatar.do?userNick=&width=50&height=50&type=sns&_input_charset=UTF-8">
					<div class="hi">Hi!你好</div>
				</div>
				<div class="user-select">
					<a href="">登录</a>
					<a href="">注册</a>
					<a href="">开店</a>
				</div>
				<a href="">
					<img src="https://gw.alicdn.com/imgextra/i1/O1CN014AxN4C1Z7pWRr4wzb_!!6000000003148-0-tps-356-141.jpg_360x10000Q75.jpg_.webp" id="right-img">
				</a>
				<div class="notice-title">
					<span class="span-title">公告</span>
					<span class="span-content">
					新鲜事儿都在这里~</span>
				</div>
				<ul>
					<li>
						<a href="" class="notice-a">
							<div class="notice-color">规则</div>
							<span class="notice-text">知识产权规则解读</span>
						</a>
					</li>
					<li>
						<a href="" class="notice-a">
							<div class="notice-color">热点</div>
							<span class="notice-text">关于推进账号乱象专项整治的通知</span>
						</a>
					</li>
					<li>
						<a href="" class="notice-a">
							<div class="notice-color">热点</div>
							<span class="notice-text">淘宝平台公告
							</span>
						</a>
					</li>
				</ul>
				<div class="right-bottom">
					<div class="bottom-single">
						<span class="iconfont">&#xe733;</span>
						<p>收藏的宝贝</p>
					</div>
					<div class="bottom-single">
						<span class="iconfont">&#xe736;</span>
						<p>买过的店铺</p>
					</div>
					<div class="bottom-single">
						<span class="iconfont">&#xe735;</span>
						<p>收藏的店铺</p>
					</div>
					<div class="bottom-single">
						<span class="iconfont">&#xe631;</span>
						<p>我的足迹</p>
					</div>
				</div>
			</div>
		</div>
	
		<!-- 旺旺导航栏 -->
		<div class="wangwang">
			<div class="ww-logo iconfont">&#xe605;</div>
			<a href="" id="ww-item1">品质 好货</a>
			<a href="" id="ww-item2">猜你 喜欢</a>
			<a href="" id="ww-item3">反馈</a>
			<a href="" id="ww-item4">投诉 举报</a>
		</div>
	</body>
</html>